<template>
  <div>
    <h1>美食各地分类</h1>
    <div class="App">
      <Item v-for="data in eat" :key="data.id" v-bind="data">
        <!-- 我们在向组件内插入插槽的时候,数据由内部提供出来,我们没有办法直接使用这个数据 -->
        <!-- 所以我们需要组件内部把数据再给传递出来,供我们使用 -->
        <!-- v-slot的值是作用域插槽中传递过来的数据组成的对象,一般我们会直接解构出来使用 -->
        <template #default="{ list }">
          <ul>
            <li v-for="item in list" :key="item">{{ item }}</li>
          </ul>
        </template>
      </Item>
    </div>

    <h1>各个年龄段的游戏分类</h1>
    <div class="App">
      <Item v-for="data in play" :key="data.id" v-bind="data">
        <template #default="{ list }">
          <ol>
            <li v-for="item in list" :key="item">{{ item }}</li>
          </ol>
        </template>
      </Item>
    </div>
  </div>
</template>

<script>
import Item from "./components/Item";
export default {
  name: "App",
  components: {
    Item,
  },
  data() {
    return {
      eat: [
        { id: "001", type: "北京", list: ["卤煮", "豆汁"] },
        { id: "002", type: "上海", list: ["红烧肉", "小笼包"] },
        { id: "003", type: "武汉", list: ["热干面", "巴子"] },
      ],
      play: [
        { id: "001", type: "30", list: ["红警", "泡泡堂", "cs1.4"] },
        { id: "002", type: "20", list: ["LoL", "DNF", "CF"] },
        { id: "003", type: "10", list: ["奥特曼大战孙悟空", "消消乐"] },
      ],
    };
  },
};
</script>

<style scoped>
.App {
  display: flex;
  justify-content: space-around;
}
</style>
